<template>
  <div>
    <a-modal
        centered
        width="70%"
        :visible="VisualInspectionReportDetailVisible"
        title="Visual Inspection Report Detail"
        :okText="$t('menuItem.confirm')"
        @ok="VisualInspectionReportDetailOk"
        @cancel="VisualInspectionReportDetailOk"
    >
      <a-card>
        <a-row>
          <a-col :span="24">
            <a-table
                :columns="columns"
                :dataSource="dataSourceVIDetail"
                :loading="loadTable"
                size="small"
                bordered
                :rowKey="(record,index)=>{return index}"
                :scroll="{y:windowHeight - 350 }"
                :pagination="{
                              pageSize:3,
                              size: 'small',
                              total: dataSourceVIDetail.length,
                              showTotal: (total, range) => {
                                 return $t('menuItem.total')+` ${total} `+$t('menuItem.term')
                                },
                            }"
            >
            </a-table>
          </a-col>
        </a-row>
      </a-card>
      <template slot="footer">
        <a-button @click="VisualInspectionReportDetailOk">{{$t('menuItem.confirm')}}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
export default {
  name: "VisualInspectionReportModel",
  data() {
    return{
      columns: [
        {
          title: this.$t('menuItem.NO'),
          dataIndex: "key",
          key: "key",
          align: 'center',
          width: 80,
        },
        {
          title: this.$t('menuItem.lotId'),
          dataIndex: 'lotId',
          key: 'lotId',
          align: 'center',
        },
        {
          title: this.$t('menuItem.WaferId'),
          dataIndex: 'waferId',
          key: 'waferId',
          align: 'center',
        },
        {
          title: this.$t('menuItem.site'),
          dataIndex: 'site',
          key: 'site',
          align: 'center',
        },
        {
          title: this.$t('menuItem.die'),
          dataIndex: 'dieNo',
          key: 'dieNo',
          align: 'center',
        },
        {
          title: this.$t('menuItem.dieLayer'),
          dataIndex: 'dieLayer',
          key: 'dieLayer',
          align: 'center',
        },
        {
          title: this.$t('menuItem.dieCode'),
          dataIndex: 'dieCode',
          key: 'dieCode',
          align: 'center',
        },
        {
          title: this.$t('menuItem.createUsr'),
          dataIndex: 'createUsr',
          key: 'createUsr',
          align: 'center',
        },
        {
          title: this.$t('menuItem.createTime'),
          dataIndex: 'createTime',
          key: 'createTime',
          align: 'center',
        },
        {
          title: this.$t('menuItem.updateUsr'),
          dataIndex: 'updateUsr',
          key: 'updateUsr',
          align: 'center',
        },
        {
          title: this.$t('menuItem.updateTime'),
          dataIndex: 'updateTime',
          key: 'updateTime',
          align: 'center',
        },
        {
          title: this.$t('menuItem.remarks'),
          dataIndex: 'remarks',
          key: 'remarks',
          align: 'center',
        },
      ],
      labelCol: {span: 7},
      wrapperCol: {span: 16},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('js1000', ['VisualInspectionReportDetailVisible','dataSourceVIDetail','loadTable']),
  },
  methods: {
    ...mapMutations('js1000', ['VisualInspectionReportDetailOk','queryTableDetailList']),

  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
  },
}
</script>

<style scoped>
.yy-Row {
  margin-bottom: 1rem;
}
</style>